<!--
 * @Description: 
 * @Author: 王紫琪
 * @Date: 2021-07-14 15:08:24
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2022-01-10 16:42:16
-->
<template>
  <!-- 1.antv/g2plot  安装 npm-->
  <!-- 2.创建一个容器 -->
  <div ref="right1" style="height: 95%"></div>
</template>
<script>
import { DualAxes } from '@antv/g2plot';

export default ({
  data(){
    return{
      dataArr:[
  { year: '1991', value: 7, count: 10 },
  { year: '1997', value: 4, count: 4 },
  { year: '2005', value: 8, count: 5 },
  { year: '2009', value: 5, count: 5 },
  { year: '2010', value: 4.9, count: 4.9 },
  { year: '2014', value: 6, count: 35 },
  { year: '2019', value: 7, count: 7 },
  { year: '2020', value: 9, count: 1 },
  { year: '2021', value: 13, count: 20 }
]

    }
  },
  mounted(){
    this.initChart()
  },
  methods:{
    initChart(){
      const dualAxes=new DualAxes(this.$refs.right1,{
        data:[this.dataArr,this.dataArr],
        xField:'year',
        yField:['value','count'],
        geometryOptions: [
    {
      geometry: 'line',
      color: '#5B8FF9',
    },
    {
      geometry: 'line',
      color: '#5AD8A6',
    },
  ],
        })

     dualAxes.render();
    }
  }
})
</script>
<style scoped>

</style>

